<template>
	<view class="agentIndex">
		<wyb-noticeBar v-if="noticeText && noticeText.length > 0" :text="noticeText" :show-more="false" :show-close="true" />
		<!-- nav -->
		<view class="cu-card">
			<view class="cu-item shadow cardContainer">
				<view class="flex align-center ">
					<view class="flex-sub padding-right-lg">
						<view class="flex justify-between">
							<view class="text-lg" style="color:#fbecc2;">老板：{{ agentInfo.Name || '' }}</view>
							
							
						</view>
						<view class="text-gray" style="color: #fff;">老板手机号：{{ agentInfo.Tel || '' }}</view>
						<view class="text-lg" style="color:#fbecc2;">经销商编码：{{ agentInfo.teamNo || '' }}</view>
						
						<view v-if="pageType == 'staff'" class="text-df">员工：{{ userName }}</view>
					</view>
					<!-- 二维码 font-size:52rpx-->
					<view><text class="cuIcon-qrcode" style="font-size: 100rpx;color:#fbecc2;" @click="openCodeModal"></text></view>
				</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="gridContainer">
			<view class="nav-list">
				<navigator
					hover-class="none"
					:style="{ 'animation-delay': index * 0.1 + 1 + 's' }"
					:url="'' + item.url"
					class="nav-li animation-slide-bottom"
					navigateTo
					:class="'bg-' + item.color"
					v-for="(item, index) in elements"
					:key="index"
				>
				<view class="iconChange">
					<text :class="'cuIcon-' + item.cuIcon"></text>
				</view>
					<view class="nav-title">{{ item.title }}</view>
					<!-- <view class="nav-name">{{ item.name }}</view> -->
					
				</navigator>
			</view>
		</view>
		
		<!-- 二维码弹出框 -->
		<view class="cu-modal" :class="modalVisible ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">经销商数字化码</view>
					<view class="action" @tap="modalVisible = false"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="codeImgContainer">
					<view v-if="agentCodeUrl"><image mode="aspectFit" :src="agentCodeUrl"></image></view>
					<view class="canvasCon" v-else><canvas style="width: 200px; height: 200px;" canvas-id="code" id="code"></canvas></view>
					<view class="modalBtnContainer"><button :disabled="!agentCodeUrl" class="cu-btn round bg-blue" @click="saveCode">保存到本地</button></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions, mapMutations } from 'vuex';
import { getSharePoster } from './components/QS-SharePoster/QS-SharePoster.js';
export default {
	data() {
		return {
			pageType: '', // agent代理商 staff员工
			elements: [],
			paintPallette: {},
			modalVisible: false,
			tempFilePath: null,
			agentCodeUrl: ''
		};
	},
	computed: {
		agentInfo() {
			return this.$store.state.agent.agentInfo;
		},
		eleLength() {
			return this.elements.length;
		},
		userName() {
			return this.$store.state.user.userInfo.Name || '';
		},
		noticeText() {
			return this.$store.state.sys.noticeText;
		}
	},
	onLoad(obj) {
		console.log(this.$store.state.user.userInfo);
		if (obj.type) {
			this.pageType = obj.type;
			if (obj.type == 'agent') {
				this.elements = [
					{
						title: '团队',
						url: '/agentPages/agent/agentStaff',
						// color: 'cyan',
						color: '#efefef',
						cuIcon: 'people'
					},
					{
						title: '粉丝',
						url: '/agentPages/agent/agentFans',
						// color: 'blue',
						color: '#efefef',
						cuIcon: 'friendfavor'
					},
					{
						title: '活动',
						url: '/agentPages/agent/agentShareList',
						// color: 'purple',
						color: '#efefef',
						cuIcon: 'share'
					},
					{
						title: '待办流程',
						url: '/agentPages/agent/agentTodoList',
						// color: 'mauve',
						color: '#efefef',
						cuIcon: 'edit'
					},
					{
						title: '工单查询',
						url: '/agentPages/agent/agentWorkOrderList',
						// color: 'pink',
						color: '#efefef',
						cuIcon: 'search'
					},
					{
						title: '预发工单',
						url: '/agentPages/agent/preStartOrderList',
						// color: 'olive',
						color: '#efefef',
						cuIcon: 'repairfill'
					},
					{
						title: '数字台账',
						url: '/agentPages/eleAccount/accountIndex',
						// color: 'orange',
						color: '#efefef',
						cuIcon: 'apps'
					},
					{
						title: '销售出货',
						url: '/agentPages/eleAccount/checkoutProduct',
						// color: 'cyan',
						color: '#efefef',
						cuIcon: 'upload'
					},
					{
						title: '门店管理',
						url: '/agentPages/agent/shopList',
						// color: 'brown',
						color: '#efefef',
						cuIcon: 'shop'
					},
					{
						title: '店面展示',
						url: '/agentPages/agent/shopShow',
						// color: 'blue',
						color: '#efefef',
						cuIcon: 'taoxiaopu'
					},
					// {
					// 	title: '云学院',
					// 	url: '/agentPages/agent/cloudCollege',
					// 	color: 'purple',
					// 	cuIcon: 'read'
					// }
					{
						title: '产品反馈',
						url: '/agentPages/feedback/feedbackIndex',
						// color: 'pink',
						color: '#efefef',
						cuIcon: 'write'
					},
					{
						title: '数字订单',
						url: '/agentPages/agent/acountFansIndex',
						// color: 'pink',
						color: '#efefef',
						cuIcon: 'read'
					},
				];
				this.setAgentInfo(this.$store.state.user.userInfo);
			} else {
				this.elements = [
					{
						title: '待办流程',
						url: '/agentPages/agent/agentTodoList',
						// color: 'mauve',
						color: '#efefef',
						cuIcon: 'edit'
					},
					{
						title: '工单查询',
						url: '/agentPages/agent/agentWorkOrderList',
						// color: 'pink',
						color: '#efefef',
						cuIcon: 'search'
					},
					{
						title: '电子台账',
						url: '/agentPages/eleAccount/accountIndex',
						// color: 'orange',
						color: '#efefef',
						cuIcon: 'apps'
					},
					{
						title: '销售出库',
						url: '/agentPages/eleAccount/checkoutProduct',
						// color: 'cyan',
						color: '#efefef',
						cuIcon: 'upload'
					},
					{
						title: '门店管理',
						url: '/agentPages/agent/shopList',
						// color: 'brown',
						color: '#efefef',
						cuIcon: 'shop'
					}
				];
				uni.setNavigationBarTitle({
					title: '经销商员工'
				});
			}
			this.getUserData({
				openid: this.$store.state.user.userInfo.WxOpenId
			})
				.then(res => {
					if (res && res.code == 0) {
						if (res.subscribe) {
						} else {
							this.setNoticeText(`您尚未关注“亚太天能”公众号，可能无法接受到通知消息，请前往关注公众号`);
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	onReady() {
		uni.hideLoading();
		let self = this;
		if (this.pageType == 'staff') {
			this.getLeader({
				no: this.$store.state.user.userInfo.No
			})
				.then(res => {
					console.log('parent', res);
					if (res && res.code == '000000') {
						return this.getServerUserInfo({
							name: res.parentNo
						});
					}
				})
				.then(res => {
					console.log(res);
					if (res && res.code == '000000') {
						this.setAgentInfo(res.data);
						let openId = this.$store.state.agent.agentInfo.No;
						this.saveUrl = `${wx.env.USER_DATA_PATH}/agentCode/经销商小程序码${openId}.png`;
						this.hasCodeImg();
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
		this.getAgentCode2({
			scence: this.$store.state.user.userInfo.teamNo
		})
			.then(res => {
				console.log(res);
				if (res && res.url) {
					return getSharePoster({
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
						},
						posterCanvasId: 'code', //canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 200,
							height: 200,
							backgroundColor: 'white'
						},
						drawArray: ({ bgObj, type, bgScale }) => {
							return new Promise((rs, rj) => {
								rs([
									{
										type: 'qrcode',
										text: res.url,
										size: 200,
										dx: 0,
										dy: 0
									}
								]);
							});
						},
						setCanvasToTempFilePath: {
							destWidth: 200,
							destHeight: 200
						}
					});
				}
			})
			.then(res => {
				console.log(res);
				if (res) {
					this.agentCodeUrl = res.poster.tempFilePath;
				}
			})
			.catch(err => {
				console.log(err);
			});
	},
	methods: {
		...mapActions({
			getLeader: 'agent/getLeader',
			getServerUserInfo: 'user/getServerUserInfo',
			getUserData: 'user/getUserData',
			getAgentCode2: 'agent/getAgentCode2'
		}),
		...mapMutations({
			setAgentInfo: 'agent/setAgentInfo',
			setNoticeText: 'sys/setNoticeText'
		}),
		openCodeModal() {
			this.modalVisible = true;
		},
		saveCode() {
			wx.saveImageToPhotosAlbum({
				filePath: this.agentCodeUrl,
				success: function(res) {
					wx.showToast({
						title: '保存成功'
					});
				},
				fail: function(err) {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="less">
// @import '../../common/common.less';
page {
	background-color: #eeeeee;
}
.canvasCon {
	position: fixed;
	left: 100vw;
}
.agentIndex {
	background-color: #fff;
	
	.cardContainer {
		color:#fbecc2;
		margin: 16rpx;
		// padding: 42rpx 16rpx;
		padding:42rpx 25rpx;
		// animation: show 1s;
		background-image:url(http://app.aptenon.com/crm/miniprogram_pic/bg2.jpg);
		// background-image: url('/static/list-bg.png');
		 background-position: 636px 227px;
		 // background-size: 540px 229px;
	}

	.modalBtnContainer {
		margin: 12rpx 0;
		text-align: center;
	}
	.codeImgContainer {
		margin-top: 12rpx;
	}
	@keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}

	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}
}
</style>
